<template>
  <el-dialog
    :title="title"
    v-model="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-descriptions :column="2" border>
      <el-descriptions-item label="古庙名称">{{ form.name }}</el-descriptions-item>
      <el-descriptions-item label="ID">{{ form.id }}</el-descriptions-item>
      <el-descriptions-item label="地址" :span="2">{{ form.address }}</el-descriptions-item>
      <el-descriptions-item label="联系人">{{ form.contact_name }}</el-descriptions-item>
      <el-descriptions-item label="联系电话">{{ form.contact_phone }}</el-descriptions-item>
      <el-descriptions-item label="状态"
        ><el-tag :type="getStatusTag(form.status)">{{
          form.status_text
        }}</el-tag></el-descriptions-item
      >
      <el-descriptions-item label="提交时间">{{ form.created_at }}</el-descriptions-item>
      <el-descriptions-item label="描述信息" :span="2">{{ form.remarks }}</el-descriptions-item>
    </el-descriptions>
    <el-divider></el-divider>
    <el-image
      style="width: 100px; height: 100px"
      :src="form.image_url"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      :preview-src-list="form.images"
      show-progress
      :initial-index="4"
      fit="cover"
      :preview-teleported="true"
    />
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { addManagerApi, updateManagerApi } from "@/api/babycar";
import { ElMessage } from "element-plus";
import { inject, ref, watch } from "vue";
const title = ref("古庙申请详情");
const dialogVisible = ref(false);
const form = ref<any>({});
const getStatusTag = (status: string) => {
  switch (status) {
    case "completed":
      return "success";
    case "reviewing":
      return "warning";
    case "pending":
      return "info";
    default:
      return "primary";
  }
};
const open = (row?: any) => {
  form.value = row || {};
  dialogVisible.value = true;
};
defineExpose({ open });
</script>

<style lang="scss" scoped>
.map-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
